<template>
  <div class="apply-container">
    <NavBar ref="navbarRef" :data="applyNavbar" @click-navbar="clickNavbar" />
    <TableVue
      :columns="applyColumns"
      :data="tableData"
      :operate="{ detail: true }"
      @click-operate="clickTableOperate"
    >
      <template #payStatus="{ row }">
        <div class="pay-status" :class="row.status == 2 ? 'payed' : 'pre_pay'">
          <span class="dot"></span>
          <span>{{ row.status_title }}</span>
        </div>
      </template>
    </TableVue>
    <ShowMore
      pagerMb="0"
      v-model:currentPage="listParams.page"
      :totalCount="listParams.total"
    >
    </ShowMore>
    <DetailModel ref="DetailModelRef" :id="detailId" />
  </div>
</template>

<script setup lang="ts">
import { nextTick, ref, watch } from "vue";
import { postCourseSubmit } from "../../../../api/aviation";
import { applyNavbar } from "../a_data/navbar";
import { applyColumns } from "../a_data/table";
import NavBar from "../a_components/navbar.vue";
import TableVue from "../a_components/table.vue";
import DetailModel from "./components/detailModel.vue";
import { useMemberStore } from "../../../../store";
const activeStatus = ref("");

const memberStore = useMemberStore();

const clickNavbar = ({ item, index }) => {
  let status = item.status;
  activeStatus.value = status;
  listParams.value.page = 1;
  getTableData();
};

const navbarRef = ref();
watch(
  () => memberStore.AppLang,
  () => {
    navbarRef.value.refresh();
  }
);
const tableData = ref();
let listParams = ref({
  page: 1,
  total: 0,
});

const getTableData = async () => {
  let { page } = listParams.value;
  let params: { page: number; status?: number } = {
    page: page,
  };
  if (activeStatus.value) {
    params.status = parseInt(activeStatus.value);
  }
  let res = await postCourseSubmit(params);
  listParams.value.total = res.data.total;
  let newData: any[] = [];
  res.data.data.map((item) => {
    let obj = {
      ...item,
      orderId: item.order_number,
      courseName: item.course_title,
      vip: item.last_name + ' ' + item.first_name,
      payStatus: item.status_title,
      time: item.create_time.replaceAll("-", "/"),
    };
    newData.push(obj);
  });
  tableData.value = newData;
};

getTableData();

// 点击table操作项
const detailId = ref("");
const DetailModelRef = ref();
const clickTableOperate = ({ row, index, type }) => {
  if (type == "detail") {
    detailId.value = row.id;
    nextTick(() => {
      DetailModelRef.value.showDialog();
    });
  }
};
</script>
<style scoped lang="less">
.apply-container {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.pay-status {
  &.payed {
    color: #43e512;
    .dot {
      background-color: #43e512;
      box-shadow: 0px 2 4px 0px rgba(67, 229, 18, 0.2);
    }
  }
  &.pre_pay {
    color: #969696;
    .dot {
      background-color: #969696;
      box-shadow: 0px 2 4px 0px rgba(150, 150, 150, 0.2);
    }
  }
  display: flex;
  align-items: center;
  gap: 5px;
  .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
  }
}
</style>
